<template>
	<div class="bgBox">
		<div class="homeBigBox">
			<!-- 左侧菜单栏 -->
			<div class="menuBox">
				<div class="firstBox">
					<div class="logoAndName">
						<img src="@/assets/images/logo.webp" alt="logo" class="logo">
						<div class="nameBox">泛希诚科技</div>
					</div>
					<div class="addBox">+新建对话</div>
				</div>
				<div class="secondBox">
					<div v-for="item in dialogueList" :key="item.time">
						<div class="dialogueTime">{{ item.time }}</div>
						<div class="dialogueItem" v-for="i in item.list" :key="i.id">
							<div class="dialogueName">{{ i.title }}</div>
						</div>
					</div>
				</div>
				<div class="lastBox">
					<!-- 库列表 -->
					<div class="dataList">
						<div class="dataItem">
							<img src="@/assets/svg/shujuku.svg" alt="SVG Image" />
							<span>智能数据库
								<img src="@/assets/svg/addIcon.svg" alt="SVG Image" />
							</span>
						</div>
						<div class="dataItem">
							<img src="@/assets/svg/zhishiku.svg" alt="SVG Image" />
							<span>推理知识库
								<img src="@/assets/svg/addIcon.svg" alt="SVG Image" />
							</span>
						</div>
						<div class="dataItem">
							<img src="@/assets/svg/changwen.svg" alt="SVG Image" />
							<span>长文知识库
								<img src="@/assets/svg/addIcon.svg" alt="SVG Image" />
							</span>
						</div>
					</div>
					<!-- 个人信息 -->
					<div class="personInfo">
						<img src="@/assets/images/user.png" alt="person" class="person">
						个人信息
					</div>
				</div>
			</div>
			<!-- 右侧主体 -->
			<div class="contentBox">
				<img class="headerName" src="@/assets/images/nameLogo.webp" alt="">
				<!-- 说明 -->
				<div class="explainBox">
					FuxiGen，泛希诚团队研发的新一代智能决策引擎，融合多模态理解和动态推理。专为政企机构打造，可实现智能数据分析、复杂推理、百万级文本精准问答。平台支持私有化知识库无缝集成和多源异构数据实时融合，依靠语义增强检索、上下文关联建模、交互式可视化分析这三大核心技术引擎，让知识处理效率提升300%+，让AI成为高效精准的业务决策大脑！
				</div>
				<!-- 卡片介绍及入口 -->
				<div class="cardBox">
					<div class="cardItem">
						<span>
							<img src="@/assets/svg/shujufenxi.svg" alt="SVG Image" />&nbsp;智能数据分析平台
						</span>
						<!-- 新开窗口 -->
						<div class="cardItemBtn" @click="goToPage('intelligent')">
							<img src="@/assets/svg/dianji.svg" alt="SVG Image" />
							示例网站
						</div>
						<p class="cardItemText">
							对话即分析！无需编写代码就能完成专业数据洞察（清洗、建模、可视化），效率飙升10倍，让您秒变数据分析专家！
						</p>
					</div>
					<div class="cardItem">
						<span>
							<img src="@/assets/svg/tuili.svg" alt="SVG Image" />
							复杂推理问答平台
						</span>
						<div class="cardItemBtn" @click="goToPage('reasonrag')">
							<img src="@/assets/svg/dianji.svg" alt="SVG Image" />
							示例网站
						</div>
						<p class="cardItemText">
							推理引擎驱动智能闭环：检索→推理→验证→修正，让决策系统越用越精准，越用越高效！
						</p>
					</div>
					<div class="cardItem">
						<span>
							<img src="@/assets/svg/book.svg" alt="SVG Image" />&nbsp;百万级文本问答平台
						</span>
						<div class="cardItemBtn" @click="goToPage('millionText')">
							<img src="@/assets/svg/dianji.svg" alt="SVG Image" />
							示例网站
						</div>
						<p class="cardItemText">
							多模态理解×动态分块×混合检索三大黑科技，百万字资料10分钟极速解析，助您决策快人一步！
						</p>
					</div>
				</div>
				<!-- 输入框及选项框 -->
				<div class="inputBox">
					<!-- 下拉框 -->
					<div class="selectBox">
						<el-select size="large" v-model="activeKnowledgeBase" placeholder="请选择知识库">
							<el-option v-for="item in knowledgeBaseList" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
						&nbsp;
						<el-select size="large" v-model="activeDatabase" placeholder="请选择数据库">
							<el-option v-for="item in databaseList" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</div>
					<div class="textareaInputBox">
						<!-- 背景图 -->
						<img class="cardbg" src="@/assets/svg/cardbg.svg" alt="">
						<el-input 
						  type="textarea" :autosize="{ minRows: 6, maxRows: 10 }" v-model="searchInput"
							@click="textareaFocus" maxlength='0' placeholder="请输入您的问题" />
						<!-- 发送按钮 -->
						<div class="sendBtn">
							<img src="@/assets/images/send.png" alt="">
						</div>
					</div>
				</div>
				<!-- 备案号 -->
				<div class="recordNumber">
					蜀ICP备2025141320号
				</div>
			</div>
			<!-- 背景 -->
			<img class="bgOne" src="@/assets/images/bj.png" alt="">
			<img class="bgTwo" src="@/assets/images/bj.png" alt="">
		</div>
	</div>

</template>

<script setup>
import { ref } from "vue";
// 导入icon
import { } from '@element-plus/icons-vue'
// 导入router
import { useRouter } from 'vue-router'
const router = useRouter()
// 问答的历史记录列表
const dialogueList = ref([
	{
		time: '今天',
		list: [
			{
				id: 1,
				title: '你好',
			},
		]
	},
	{
		time: '7天内',
		list: [
			{
				id: 2,
				title: '你好',
			},
		]
	}
])



// 下拉框选项菜单
const activeKnowledgeBase = ref('')
const knowledgeBaseList = ref([
	{
		name: '知识库1',
		id: 1
	},
	{
		name: '知识库2',
		id: 2
	},
	{
		name: '知识库3',
		id: 3
	},
])
const activeDatabase = ref()
const databaseList = ref([
	{
		name: '数据库1',
		id: 1
	},
	{
		name: '数据库2',
		id: 2
	},
	{
		name: '数据库3',
		id: 3
	},
])
// 输入框内容
const searchInput = ref('')
// 跳转页面
const goToPage = (path) => {
	// 打开新窗口
	const fullPath = router.resolve({ path }).href;
	console.log(fullPath);
	// Open the route in a new window
	window.open(fullPath, '_blank');
}
const textareaFocus = () => {
	// 对话框提示
	ElMessageBox.alert('请先登录或使用示例网站', '提示', {
		confirmButtonText: '确定',
	})

}
</script>
<style lang="scss" scoped>
.bgBox {
	background: linear-gradient(to right, #02283D, #023B5A);
}
.homeBigBox {
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	min-height: 880px;
	display: flex;
	overflow: hidden;
	position: relative;

	.menuBox {
		width: 18vw;
		height: 100%;
		// background: linear-gradient(to right, #02283D, #023B5A);
		border-right: 4px solid #1B5978;
		// border-left: 4px solid #1B5978;
		z-index: 1;

		.firstBox {
			border-bottom: 3px solid #1B5978;
			height: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.logoAndName {
				display: flex;
				align-items: center;
				justify-content: center;

				.logo {
					width: 40px;
					margin-right: 15px;
				}

				.nameBox {
					color: #ACF8FF;
					font-size: 30px;
				}
			}

			.addBox {
				width: 80%;
				height: 50px;
				background-color: #134B6E;
				border: 3px solid #1B5978;
				border-radius: 15px;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22px;
				font-weight: bold;
				margin-top: 10%;
				cursor: pointer;
			}
		}

		.secondBox {
			width: 80%;
			height: calc(47% - 6px);
			box-sizing: border-box;
			// padding: 10px 50px;
			color: #CEEEF9;
			overflow-y: auto;
			margin: 0 auto;

			.dialogueTime {
				font-size: 25px;
				margin-top: 20px;
			}

			.dialogueName {
				font-size: 20px;
				padding: 10px;
				// 单行排列超出显示省略号
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				cursor: pointer;

				&:hover {
					background-color: #fff1;
				}
			}
		}

		.lastBox {
			height: 27%;
			border-top: 3px solid #1B5978;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.dataList {
				width: 80%;
				display: flex;
				// align-items: center;
				justify-content: center;
				flex-direction: column;

				.dataItem {
					margin-top: 12px;
					display: flex;
					align-items: center;
					// // 位移到原来的0.9倍
					// transform: scale(0.9);
				}

				span {
					margin-left: 10px;
					color: #CEEEF9;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 20px;
					width: 160px;
				}
			}

			.personInfo {
				width: 80%;
				margin-top: 50px;
				display: flex;
				align-items: center;
				color: #CEEEF9;
				font-size: 20px;
				.person {
					margin-right: 10px;
					width: 32px;
					margin-left: 3px;
				}
			}
		}
	}

	.contentBox {
		width: calc(92vw - 4px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 1;

		.headerName {
			width: 40%;
		}

		.explainBox {
			//text-align: center;
			width: 75%;
			color: #CEEEF9;
			font-size: 22px;
			margin-top: 25px;
			line-height: 1.5;
		}

		.cardBox {
			width: 80%;
			display: flex;
			justify-content: space-around;
			margin-top: 4.5%;

			.cardItem {
				width: 27%;
				min-width: 250px;
				min-height: 300px;
				max-height: 350px;
				height: 30%;
				background-color: #0D2B3D;
				color: #CEEEF9;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				border-radius: 15px;
				border: 1px solid #1B5978;

				span {
					text-align: center;
					font-size: 22px;
					color: #fff;
					font-weight: bold;
					display: inline-block;
					// margin: 20px 0;
					display: flex;
					align-items: center;
				}

				.cardItemBtn {
					// 取消下划线
					text-decoration: none;
					cursor: pointer;
					width: 80%;
					height: 60px;
					background-color: #134B6E;
					border-radius: 20px;
					margin: 31px 0;
					display: flex;
					color: #fff;
					align-items: center;
					justify-content: center;
					font-size: 22px;
					font-weight: bold;
					box-shadow: 2px 2px 2px #fff5;

					&:hover {
						font-size: 23px;
						height: 62px;
						margin: 30px 0;
					}

					img {
						margin-right: 8px;
						margin-left: -15px;
					}
				}

				.cardItemText {
					padding: 0;
					height: 80px;
					text-align: center;
					width: 90%;
					line-height: 1.5;
				}
			}
		}
	}

	.inputBox {
		// margin-top:calc(100vh - 1000px);
		// margin-top:calc(80vh - 800px);
		margin-top: auto;
		width: 75%;

		.selectBox {
			width: 100%;
			text-align: right;
		}

		.textareaInputBox {
			margin-top: 10px;
			position: relative;

			// deep样式穿透
			:deep(.el-textarea__inner) {
				border-radius: 15px !important;
				font-size: 18px;
				color: #fff;
				background-color: #09212F;
			}

			.cardbg {
				position: absolute;
				top: -50px;
				left: 0;
				// 裁剪下半部分
				clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
				width: 100%;
				// height: 210px;
				z-index: -1;
				// min-height: 120%;
				// max-height: 130%;
				opacity: 0.5;
			}

			.sendBtn {
				position: absolute;
				right: 10px;
				bottom: 10px;
				width: 55px;
				height: 50px;
				border-radius: 15px;
				background-color: #5F96B9;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				&:hover {
					background-color: #6da3c5;
				}

				img {
					width: 35px;
					height: 30px;
				}
			}
		}

	}

	.recordNumber {
		color: #aaa;
		margin-top: 15px;
		margin-bottom: 15px;
		font-size: 16px;
	}

	// 背景========================================
	.bgOne {
		position: absolute;
		height: 40%;
		top: 47%;
		left: 16%;
		z-index: 0;
		// 旋转25度
		transform: rotate(25deg);
	}

	.bgTwo {
		position: absolute;
		height: 40%;
		// 裁剪只留上半部分
		clip-path: polygon(0 0, 100% 0, 100% 65%, 0 50%);
		bottom: 10%;
		bottom: 5%;
		right: -5%;
		transform: rotate(-50deg);
	}
}
</style>
